<template>
	<div v-if="dialog">
		<div class="mask" @click="hide"></div>
		<div class="mask-content">
			<div class="mask-content-close" @click="hide"><img src="../../static/img/icon/find_icon/close@3x.png"/></div>
			<div class="mask-content-header"><img src="../../static/img/icon/find_icon/star@3x.png"/>恭喜您！</div>
			<div class="mask-content-success">抢券成功</div>
			<div class="mask-content-alert">
				<div>恭喜获得1.00元现金券</div>
				<div>请在有效期内使用</div>
			</div>
			<div class="mask-content-coupon">
				<div>
					<div class="mask-content-coupon-left">
						<span>￥12.00</span>
						<div>现金券</div>
					</div>
					<div class="mask-content-coupon-right">全场通用券</div>
				</div>
				<div>
					有效期：2017-01-01至2017-05-01
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			}
		}
	}
</script>

<style scoped lang="less">
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0, 0.8);
	}
	
	.mask-content {
		position: fixed;
		border-radius: 10px;
		top: 15%;
		left: 15%;
		background: #fe5069;
		width: 70%;
		border: 1px solid #000;
		font-size: 14px;
		color: #fff;
		padding: 5px 5px 10px;
		text-align: center;
		
		.mask-content-close {
			float: right;
			
			img {
				width: 20px;
				height: 20px;
			}
		}
		
		.mask-content-header {
			margin-top: 10px;
			
			img {
				width: 20px;
				height: 20px;
			}
		}
		
		.mask-content-success {
			font-size: 18px;
			margin: 10px 0;
			font-weight: bold;
		}
		
		.mask-content-alert {
			font-size: 12px;
			margin-bottom: 10px;
		}
		
		.mask-content-coupon {
			background: #eee;
			width: 90%;
			/*height: 100px;*/
			margin: 0 auto;
			border-radius: 10px;
			color: #000!important;
			overflow: hidden;
			
			div:nth-child(1) {
				display: flex;
				
				div {
					background: #fff;
					padding: 10px 0;
				}
				
				.mask-content-coupon-left {
					margin-right: 5px;
					display: flex;
					justify-content: center;
					width: 80px;
					
					flex-direction: column;
					
					span {
						color: red;
						font-size: 16px;
					}
					
					div {
						padding: 0;
						font-size: 12px;
						color: #E5E5E5;
					}
				}
				
				.mask-content-coupon-right {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
				}
			}
			
			div:nth-child(2) {
				font-size: 12px;
			}
		}
	}
</style>